<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    <title>可能是最详细的 Hexo + GitHub Pages 搭建博客的教程 | Xiaoming&#39;s Blog | 一入前端深似海，从此妹子是路人。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="GitHub Pages,Hexo,Git,Node.js,博客">
    <meta name="description" content="前言：博主目前大三，Web 前端爱好者。写博客的好处，不是为了写而写，而是一个记录思想的过程。不要考虑它能带给你什么，而是你自己从中收获了什么。 最近刚好有空，于是就参照网上的各种教程，搭建了一个博客。现在把 Hexo + GitHub Pages 搭建博客的完整过程记录下来：">
<meta name="keywords" content="GitHub Pages,Hexo,Git,Node.js,博客">
<meta property="og:type" content="article">
<meta property="og:title" content="可能是最详细的 Hexo + GitHub Pages 搭建博客的教程">
<meta property="og:url" content="http://www.lovebxm.com/2017/05/30/buildBlog/index.html">
<meta property="og:site_name" content="Xiaoming&#39;s Blog">
<meta property="og:description" content="前言：博主目前大三，Web 前端爱好者。写博客的好处，不是为了写而写，而是一个记录思想的过程。不要考虑它能带给你什么，而是你自己从中收获了什么。 最近刚好有空，于是就参照网上的各种教程，搭建了一个博客。现在把 Hexo + GitHub Pages 搭建博客的完整过程记录下来：">
<meta property="og:image" content="http://oph264zoo.bkt.clouddn.com/17-5-28/25738843.jpg">
<meta property="og:image" content="http://oph264zoo.bkt.clouddn.com/17-5-28/62582265.jpg">
<meta property="og:image" content="http://oph264zoo.bkt.clouddn.com/17-5-28/13485948.jpg">
<meta property="og:image" content="http://img.mukewang.com/57eea87a0001c62213450582.png">
<meta property="og:image" content="http://oph264zoo.bkt.clouddn.com/17-5-28/42622869.jpg">
<meta property="og:image" content="http://oph264zoo.bkt.clouddn.com/17-5-28/49821520.jpg">
<meta property="og:image" content="http://oph264zoo.bkt.clouddn.com/17-5-28/41219383.jpg">
<meta property="og:image" content="http://oph264zoo.bkt.clouddn.com/17-5-29/81453389.jpg">
<meta property="og:image" content="http://oph264zoo.bkt.clouddn.com/17-5-28/34921926.jpg">
<meta property="og:image" content="http://oph264zoo.bkt.clouddn.com/17-5-29/79989003.jpg">
<meta property="og:image" content="http://oph264zoo.bkt.clouddn.com/17-5-29/38118493.jpg">
<meta property="og:updated_time" content="2017-06-01T01:45:48.768Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="可能是最详细的 Hexo + GitHub Pages 搭建博客的教程">
<meta name="twitter:description" content="前言：博主目前大三，Web 前端爱好者。写博客的好处，不是为了写而写，而是一个记录思想的过程。不要考虑它能带给你什么，而是你自己从中收获了什么。 最近刚好有空，于是就参照网上的各种教程，搭建了一个博客。现在把 Hexo + GitHub Pages 搭建博客的完整过程记录下来：">
<meta name="twitter:image" content="http://oph264zoo.bkt.clouddn.com/17-5-28/25738843.jpg">
    
        <link rel="alternate" type="application/atom+xml" title="Xiaoming&#39;s Blog" href="/atom.xml">
    
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>
</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu"  >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/brand.jpg)">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">白小明</h5>
          <a href="mailto:80583600@qq.com" title="80583600@qq.com" class="mail">80583600@qq.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/hand-peace-o"  >
                <i class="icon icon-lg icon-hand-peace-o"></i>
                作品
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/bxm0927" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/user"  >
                <i class="icon icon-lg icon-user"></i>
                关于我
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/404.html"  >
                <i class="icon icon-lg icon-link"></i>
                404 测试
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">可能是最详细的 Hexo + GitHub Pages 搭建博客的教程</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">可能是最详细的 Hexo + GitHub Pages 搭建博客的教程</h1>
        <h5 class="subtitle">
            
                <time datetime="2017-05-29T16:06:49.991Z" itemprop="datePublished" class="page-time">
  2017-05-30
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#搭建-Node-js-环境"><span class="post-toc-number">1.</span> <span class="post-toc-text">搭建 Node.js 环境</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#搭建-Git-环境"><span class="post-toc-number">2.</span> <span class="post-toc-text">搭建 Git 环境</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#GitHub-注册和配置"><span class="post-toc-number">3.</span> <span class="post-toc-text">GitHub 注册和配置</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#安装配置-Hexo"><span class="post-toc-number">4.</span> <span class="post-toc-text">安装配置 Hexo</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#关联-Hexo-与-GitHub-Pages"><span class="post-toc-number">5.</span> <span class="post-toc-text">关联 Hexo 与 GitHub Pages</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#GitHub-Pages-地址解析到个人域名"><span class="post-toc-number">6.</span> <span class="post-toc-text">GitHub Pages 地址解析到个人域名</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Hexo-的常用操作"><span class="post-toc-number">7.</span> <span class="post-toc-text">Hexo 的常用操作</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#发表一篇文章"><span class="post-toc-number">7.1.</span> <span class="post-toc-text">发表一篇文章</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#新建一个自定义页面"><span class="post-toc-number">7.2.</span> <span class="post-toc-text">新建一个自定义页面</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#显示部分文章内容"><span class="post-toc-number">7.3.</span> <span class="post-toc-text">显示部分文章内容</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#更改主题"><span class="post-toc-number">7.4.</span> <span class="post-toc-text">更改主题</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#添加插件"><span class="post-toc-number">7.5.</span> <span class="post-toc-text">添加插件</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#添加-404-页面"><span class="post-toc-number">7.6.</span> <span class="post-toc-text">添加 404 页面</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#多PC同步管理博客"><span class="post-toc-number">7.7.</span> <span class="post-toc-text">多PC同步管理博客</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#中文乱码"><span class="post-toc-number">7.8.</span> <span class="post-toc-text">中文乱码</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#结束语"><span class="post-toc-number">8.</span> <span class="post-toc-text">结束语</span></a></li></ol>
        </nav>
    </aside>
    
<article id="post-buildBlog"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">可能是最详细的 Hexo + GitHub Pages 搭建博客的教程</h1>
        <div class="post-meta">
            <time class="post-time" title="2017-05-30 00:06:49" datetime="2017-05-29T16:06:49.991Z"  itemprop="datePublished">2017-05-30</time>

            


            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


            

        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <p><strong>前言</strong>：博主目前大三，Web 前端爱好者。写博客的好处，不是为了写而写，而是一个记录思想的过程。不要考虑它能带给你什么，而是你自己从中收获了什么。</p>
<p>最近刚好有空，于是就参照网上的各种教程，搭建了一个博客。现在把 Hexo + GitHub Pages 搭建博客的完整过程记录下来：</p>
<a id="more"></a>
<p>个人博客地址：<a href="http://www.lovebxm.com">http://www.lovebxm.com</a></p>
<p><strong>大概流程</strong>：</p>
<ol>
<li>搭建 Node.js 环境</li>
<li>搭建 Git 环境</li>
<li>GitHub 注册和配置</li>
<li>安装配置 Hexo</li>
<li>关联 Hexo 与 GitHub Pages</li>
<li>GitHub Pages 地址解析到个人域名</li>
<li>Hexo 的常用操作</li>
<li>结束语</li>
</ol>
<h2 id="搭建-Node-js-环境"><a href="#搭建-Node-js-环境" class="headerlink" title="搭建 Node.js 环境"></a>搭建 Node.js 环境</h2><blockquote>
<p>为什么要搭建 Node.js 环境？ - 因为 Hexo 博客系统是基于 Node.js 编写的</p>
</blockquote>
<p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以在非浏览器环境下，解释运行 JS 代码。</p>
<p>在 Node.js 官网：<a href="https://nodejs.org/en/" target="_blank" rel="external">https://nodejs.org/en/</a> 下载安装包 <code>v6.10.3 LTS</code></p>
<p>保持默认设置即可，一路Next，安装很快就结束了。</p>
<p>然后打开命令提示符，输入 <code>node -v</code>、<code>npm -v</code>，出现版本号则说明 Node.js 环境配置成功，第一步完成！！！</p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://oph264zoo.bkt.clouddn.com/17-5-28/25738843.jpg" alt="" title="">
                </div>
                <div class="image-caption"></div>
            </figure>
<h2 id="搭建-Git-环境"><a href="#搭建-Git-环境" class="headerlink" title="搭建 Git 环境"></a>搭建 Git 环境</h2><blockquote>
<p>为什么要搭建 Git 环境？ - 因为需要把本地的网页和文章等提交到 GitHub 上。</p>
</blockquote>
<p>Git 是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。</p>
<p>在 Git 官网：<a href="https://git-scm.com/" target="_blank" rel="external">https://git-scm.com/</a> 下载安装包 <code>Git-2.13.0-64-bit.exe</code></p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://oph264zoo.bkt.clouddn.com/17-5-28/62582265.jpg" alt="" title="">
                </div>
                <div class="image-caption"></div>
            </figure>
<p>桌面右键，打开 <code>Git Bush Here</code>，输入 <code>git --version</code>，出现版本号则说明 Git 环境配置成功，第二步完成！！！</p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://oph264zoo.bkt.clouddn.com/17-5-28/13485948.jpg" alt="" title="">
                </div>
                <div class="image-caption"></div>
            </figure>
<h2 id="GitHub-注册和配置"><a href="#GitHub-注册和配置" class="headerlink" title="GitHub 注册和配置"></a>GitHub 注册和配置</h2><p>GitHub 是一个代码托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub。</p>
<p>Github注册：<a href="https://github.com/" target="_blank" rel="external">https://github.com/</a></p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://img.mukewang.com/57eea87a0001c62213450582.png" alt="image" title="">
                </div>
                <div class="image-caption">image</div>
            </figure>
<p>创建仓库：Repository name 使用自己的用户名，仓库名规则：</p>
<p><strong>注意</strong>：<code>yourname</code> 必须是你的用户名。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">yourname/yourname.github.io</div></pre></td></tr></table></figure>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://oph264zoo.bkt.clouddn.com/17-5-28/42622869.jpg" alt="" title="">
                </div>
                <div class="image-caption"></div>
            </figure>
<p>访问 yourname.github.io，如果可以正常访问，那么 Github 的配置已经结束了。</p>
<p>到此搭建 Hexo 博客的相关环境配置已经完成，下面开始讲解 Hexo 的相关操作</p>
<h2 id="安装配置-Hexo"><a href="#安装配置-Hexo" class="headerlink" title="安装配置 Hexo"></a>安装配置 Hexo</h2><p>Hexo 是一个快速、简洁且高效的博客框架，使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p>
<p>强烈建议你花20分钟区读一读 Hexo 的官方文档：<a href="https://hexo.io/zh-cn/" target="_blank" rel="external">https://hexo.io/zh-cn/</a></p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://oph264zoo.bkt.clouddn.com/17-5-28/49821520.jpg" alt="" title="">
                </div>
                <div class="image-caption"></div>
            </figure>
<p><strong>使用 npm 安装 Hexo</strong>：在命令行中输入</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install hexo-cli -g</div></pre></td></tr></table></figure>
<p>然后你将会看到下图，可能你会看到一个<code>WARN</code>，但是不用担心，这不会影响你的正常使用。</p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://oph264zoo.bkt.clouddn.com/17-5-28/41219383.jpg" alt="" title="">
                </div>
                <div class="image-caption"></div>
            </figure>
<p>查看Hexo的版本</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo version</div></pre></td></tr></table></figure>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://oph264zoo.bkt.clouddn.com/17-5-29/81453389.jpg" alt="" title="">
                </div>
                <div class="image-caption"></div>
            </figure>
<p>安装 Hexo 完成后，请执行下列命令来初始化 Hexo，用户名改成你的，Hexo 将会在指定文件夹中新建所需要的文件。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">hexo init bxm0927.github.io</div><div class="line"></div><div class="line">cd bxm0927.github.io</div><div class="line"></div><div class="line">npm install</div></pre></td></tr></table></figure>
<p>新建完成后，指定文件夹的目录如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">.</div><div class="line">├── .deploy         #需要部署的文件</div><div class="line">├── node_modules    #Hexo插件</div><div class="line">├── public          #生成的静态网页文件</div><div class="line">├── scaffolds       #模板</div><div class="line">├── source          #博客正文和其他源文件，404、favicon、CNAME 都应该放在这里</div><div class="line">| ├── _drafts       #草稿</div><div class="line">| └── _posts        #文章</div><div class="line">├── themes          #主题</div><div class="line">├── _config.yml     #全局配置文件</div><div class="line">└── package.json    #npm 依赖等</div></pre></td></tr></table></figure>
<p><strong>运行本地 Hexo 服务</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">hexo server</div><div class="line">或者</div><div class="line">hexo s</div></pre></td></tr></table></figure>
<p>您的网站会在 <a href="http://localhost:4000" target="_blank" rel="external">http://localhost:4000</a> 下启动。如果 <a href="http://localhost:4000" target="_blank" rel="external">http://localhost:4000</a> 能够正常访问，则说明 Hexo 本地博客已经搭建起来了，只是本地哦，别人看不到的。下面，我们要部署到Github。</p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://oph264zoo.bkt.clouddn.com/17-5-28/34921926.jpg" alt="" title="">
                </div>
                <div class="image-caption"></div>
            </figure>
<p><strong>注意1</strong>：执行hexo server提示找不到该指令</p>
<p>解决办法：在Hexo 3.0 后server被单独出来了，需要安装server，安装的命令如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">sudo npm install hexo-server</div><div class="line">或者</div><div class="line">npm install hexo -server --save</div></pre></td></tr></table></figure>
<h2 id="关联-Hexo-与-GitHub-Pages"><a href="#关联-Hexo-与-GitHub-Pages" class="headerlink" title="关联 Hexo 与 GitHub Pages"></a>关联 Hexo 与 GitHub Pages</h2><p>我们如何让本地git项目与远程的github建立联系呢？用 SSH keys</p>
<p><strong>生成SSH keys</strong></p>
<p>输入你自己的邮箱地址</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ssh-keygen -t rsa -C &quot;80583600@qq.com&quot;</div></pre></td></tr></table></figure>
<p>在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入，我们按回车不设置密码。</p>
<p><strong>添加 SSH Key 到 GitHub</strong></p>
<p>打开 <code>C:\Users\bxm09\.ssh\id_rsa.pub</code>，此文件里面内容为刚才生成的密钥，准确的复制这个文件的内容，粘贴到 <a href="https://github.com/settings/ssh" target="_blank" rel="external">https://github.com/settings/ssh</a> 的 <code>new SSH key</code> 中</p>
<p><strong>测试</strong></p>
<p>可以输入下面的命令，看看设置是否成功，git@github.com的部分不要修改：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ssh -T git@github.com</div></pre></td></tr></table></figure>
<p>如果是下面的反馈：</p>
<blockquote>
<p>The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.<br>RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.<br>Are you sure you want to continue connecting (yes/no)?</p>
</blockquote>
<p>不要紧张，输入yes就好，然后会看到：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Hi aierui! You&apos;ve successfully authenticated, but GitHub does not provide shell access.</div></pre></td></tr></table></figure>
<p><strong>配置Git个人信息</strong></p>
<p>现在你已经可以通过 SSH 链接到 GitHub 了，还有一些个人信息需要完善的。<br>Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">git config --global user.name &quot;bxm0927&quot;</div><div class="line">git config --global user.email &quot;80583600@qq.com&quot;</div></pre></td></tr></table></figure>
<p><strong>配置 Deployment</strong></p>
<p>在<code>_config.yml</code>文件中，找到<code>Deployment</code>，然后按照如下修改，用户名改成你的：</p>
<p>需要注意的是：冒号后面记得空一格！</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"># Deployment</div><div class="line">## Docs: https://hexo.io/docs/deployment.html</div><div class="line">deploy:</div><div class="line">  type: git</div><div class="line">  repo: git@github.com:bxm0927/bxm0927.github.io.git</div><div class="line">  branch: master</div></pre></td></tr></table></figure>
<p><strong>本地文件提交到 GitHub Pages</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">// 删除旧的 public 文件</div><div class="line">hexo clean</div><div class="line"></div><div class="line">// 生成新的 public 文件</div><div class="line">hexo generate</div><div class="line">或者</div><div class="line">hexo g</div><div class="line"></div><div class="line">// 开始部署</div><div class="line">hexo deploye</div><div class="line">或者</div><div class="line">hexo d</div></pre></td></tr></table></figure>
<p>在浏览器中输入 <a href="https://bxm0927.github.io" target="_blank" rel="external">https://bxm0927.github.io</a> （用户名改成你的）看到了 Hexo 与 GitHub Pages 已经成功关联了，哇哇哇哇哇哇，开心死你了，不要忘了回来给我点赞哟 ~</p>
<p><strong>注意1</strong>：若上面操作失败，则需要提前安装一个扩展：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install hexo-deployer-git --save</div></pre></td></tr></table></figure>
<p><strong>注意2</strong>：如果在执行 <code>hexo d</code> 后,出现 <code>error deployer not found:github</code> 的错误（如下），则是因为没有设置好 public key 所致，重新详细设置即可。</p>
<blockquote>
<p>Permission denied (publickey).<br>fatal: Could not read from remote repository.<br>Please make sure you have the correct access rights<br>and the repository exists.</p>
</blockquote>
<p><strong>注意3</strong>：怎么避免 .md 文件被解析？</p>
<p>Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中，在执行hexo deploy时将其复制到.deploy文件夹中。Github的版本库通常建议同时附上README.md说明文件，但是hexo默认情况下会把所有md文件解析成html文件，所以即使你在线生成了 README. md，它也会在你下一次部署时被删去。怎么解决呢？</p>
<p>在执行hexo deploy前把在本地写好的README.md文件复制到.deploy文件夹中，再去执行hexo deploy。</p>
<h2 id="GitHub-Pages-地址解析到个人域名"><a href="#GitHub-Pages-地址解析到个人域名" class="headerlink" title="GitHub Pages 地址解析到个人域名"></a>GitHub Pages 地址解析到个人域名</h2><blockquote>
<p>Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服 务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默 认提供的域名 github.io 或者自定义域名来发布站点。</p>
</blockquote>
<p>看着博客的域名是二级域名，总有一种寄人篱下的感觉，为了让这个小窝看起来更加正式，我在阿里云上买了一个域名，打算将博客绑定自己的域名。</p>
<p>进行该绑定过程，其实就是一个重定向的过程。</p>
<p>在 GitHub 仓库的根目录下建立一个 <code>CNAME</code> 的文本文件(注意：没有扩展名)，文件里面只能输入一个你的域名，不能加<code>http://</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">www.lovebxm.com</div></pre></td></tr></table></figure>
<p>注意：CNAME 一定是在你 Github 项目的 master 根目录下</p>
<p>进入<a href="https://dc.aliyun.com/tcparse/dns.htm" target="_blank" rel="external">阿里云域名解析地</a>址，添加解析：</p>
<ol>
<li>记录类型选择<code>CNAME</code></li>
<li>主机记录填<code>www</code></li>
<li>解析线路选择<code>默认</code></li>
<li>记录值填<code>yourname.github.io</code></li>
<li>TTL值为<code>10</code>分钟</li>
<li>再添加一个解析，记录类型<code>A</code></li>
<li>主机记录填<code>www</code></li>
<li>解析线路选择<code>默认</code></li>
<li>记录值填你GitHub 的ip地址（在cmd中ping：）</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ping bxm0927.github.com</div></pre></td></tr></table></figure>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://oph264zoo.bkt.clouddn.com/17-5-29/79989003.jpg" alt="" title="">
                </div>
                <div class="image-caption"></div>
            </figure>
<p>点击保存，等 1 分钟，访问下你自己的域名，一切就ok了。</p>
<p>域名绑定成功，域名解析成功，因此你在浏览中输入 www.lovebxm.com，或 lovebxm.com 就可以访问到博客了，输入 bxm0927.github.io 会重定向到  www.lovebxm.com。过程：www 的方式，会先解析成 <a href="http://xxxx.github.io，然后根据" target="_blank" rel="external">http://xxxx.github.io，然后根据</a> CNAME 再变成 www</p>
<p><strong>注意</strong>：CNAME文件在下次 <code>hexo deploy</code>的时候就消失了，需要重新创建，这样就很繁琐</p>
<p>方法一：每次 <code>hexo d</code> 之后，就去 GitHub 仓库根目录新建 CNAME文件</p>
<p>方法二：在 <code>hexo g</code> 之后， <code>hexo d</code> 之前，把CNAME文件复制到 “\public\” 目录下面，里面写入你要绑定的域名。</p>
<p>方法三（推荐）：将需要上传至github的内容放在source文件夹，例如CNAME、favicon.ico、images等，这样在 hexo d 之后就不会被删除了。</p>
<p>方法四：通过安装插件实现永久保留</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install hexo-generator-cname --save</div></pre></td></tr></table></figure>
<p>之后在_config.yml中添加一条</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">plugins:</div><div class="line">- hexo-generator-cname</div></pre></td></tr></table></figure>
<p>需要注意的是：如果是在github上建立的CNAME文件，需要先clone到本地，然后安装插件，在deploy上去即可。CNAME只允许一个域名地址。</p>
<p><strong>注意1</strong>：每次生成的 CNAME 都是 yoursite.com 怎么解决？</p>
<p>修改 _config.yml<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">url: http://www.lovebxm.com</div><div class="line">root: /</div><div class="line">permalink: :year/:month/:day/:title/</div><div class="line">permalink_defaults:</div></pre></td></tr></table></figure></p>
<h2 id="Hexo-的常用操作"><a href="#Hexo-的常用操作" class="headerlink" title="Hexo 的常用操作"></a>Hexo 的常用操作</h2><h3 id="发表一篇文章"><a href="#发表一篇文章" class="headerlink" title="发表一篇文章"></a>发表一篇文章</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">hexo new &quot;文章标题&quot;</div><div class="line"></div><div class="line">D:\GitHub\Hexo\test&gt;hexo new &quot;文章标题&quot;</div><div class="line">INFO  Created: D:\GitHub\Hexo\test\source\_posts\文章标题.md</div></pre></td></tr></table></figure>
<p>在本地博客文件夹 <code>source\_posts</code> 文件夹下看到我们新建的 markdown 文件。</p>
<p>当然，我们也可以手动添加Markdown文件在source-&gt;_deploy文件夹下，其效果同样可以媲美<code>hexo new</code></p>
<p>文章编辑好之后，运行生成、部署命令：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">hexo clean</div><div class="line"></div><div class="line">hexo g</div><div class="line"></div><div class="line">hexo d</div></pre></td></tr></table></figure>
<p>当然你也可以执行下面的命令，相当于上面两条命令的效果</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">hexo clean</div><div class="line"></div><div class="line">hexo d -g</div></pre></td></tr></table></figure>
<h3 id="新建一个自定义页面"><a href="#新建一个自定义页面" class="headerlink" title="新建一个自定义页面"></a>新建一个自定义页面</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo new page folder</div></pre></td></tr></table></figure>
<p>###文章如何添加多个标签</p>
<p>有两种多标签格式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">tags: [a, b, c]</div><div class="line">或</div><div class="line">tags:</div><div class="line">  - a</div><div class="line">  - b</div><div class="line">  - c</div></pre></td></tr></table></figure>
<h3 id="显示部分文章内容"><a href="#显示部分文章内容" class="headerlink" title="显示部分文章内容"></a>显示部分文章内容</h3><p>如果在博客文章列表中，不想全文显示，可以增加 <code>&lt;!-- more --&gt;</code>, 后面的内容就不会显示在列表。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;!--more--&gt;</div></pre></td></tr></table></figure>
<h3 id="更改主题"><a href="#更改主题" class="headerlink" title="更改主题"></a>更改主题</h3><p>官方主题库：<a href="https://hexo.io/themes/" target="_blank" rel="external">https://hexo.io/themes/</a></p>
<p>Hexo主题非常，推荐使用 <code>Next</code> 为主题，请阅读 Next 的官方文档（ <a href="http://theme-next.iissnan.com/" target="_blank" rel="external">http://theme-next.iissnan.com/</a> ），5 分钟快速安装。</p>
<p>再提示一点，大家可以hexo主题修改一步就hexo s看下变化，初次接触对参数不清楚。只有hexo s后在可以在本地浏览到效果，Ctrl+C 停止服务器。</p>
<h3 id="添加插件"><a href="#添加插件" class="headerlink" title="添加插件"></a>添加插件</h3><p>添加 sitemap 和 feed 插件</p>
<p>切换到你本地的 hexo 目 CIA ，在命令行窗口，输入以下命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">npm install hexo-generator-feed -save</div><div class="line">npm install hexo-generator-sitemap -save</div></pre></td></tr></table></figure>
<p>修改 <code>_config.yml</code>，增加以下内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"># Extensions</div><div class="line">Plugins:</div><div class="line">- hexo-generator-feed</div><div class="line">- hexo-generator-sitemap</div><div class="line">#Feed Atom</div><div class="line">feed:</div><div class="line">  type: atom</div><div class="line">  path: atom.xml</div><div class="line">  limit: 20</div><div class="line">#sitemap</div><div class="line">sitemap:</div><div class="line">  path: sitemap.xml</div></pre></td></tr></table></figure>
<p>再执行以下命令，部署服务端</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo d -g</div></pre></td></tr></table></figure>
<p>配完之后，就可以访问 <a href="https://bxm0927.github.io/atom.xml" target="_blank" rel="external">https://bxm0927.github.io/atom.xml</a> 和 <a href="https://bxm0927.github.io/sitemap.xml" target="_blank" rel="external">https://bxm0927.github.io/sitemap.xml</a> ，发现这两个文件已经成功生成了。</p>
<h3 id="添加-404-页面"><a href="#添加-404-页面" class="headerlink" title="添加 404 页面"></a>添加 404 页面</h3><p>GitHub Pages 自定义404页面非常容易，直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默认分配的二级域名是不起作用的，使用hexo server在本机调试也是不起作用的。</p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://oph264zoo.bkt.clouddn.com/17-5-29/38118493.jpg" alt="" title="">
                </div>
                <div class="image-caption"></div>
            </figure>
<p>其实，404页面可以做更多有意义的事，来做个404公益项目吧。</p>
<p>推荐使用腾讯公益404 <a href="http://www.qq.com/404/" target="_blank" rel="external">http://www.qq.com/404/</a> ：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">&lt;script type=&quot;text/javascript&quot;</div><div class="line">        src=&quot;//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js&quot;</div><div class="line">        charset=&quot;utf-8&quot;</div><div class="line">        homePageUrl=&quot;http://www.lovebxm.com/&quot;</div><div class="line">        homePageName=&quot;回到我的主页&quot;&gt;</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
<p>复制上面代码，贴粘到目录下新建的404.html即可！</p>
<h3 id="多PC同步管理博客"><a href="#多PC同步管理博客" class="headerlink" title="多PC同步管理博客"></a>多PC同步管理博客</h3><p>很多人可能家里一台笔记本，公司一个台式机，想两个同时管理博客，同时达到备份的博客主题、文章、配置的目的。下面就介绍一下用github来备份博客并同步博客。</p>
<ol>
<li>A电脑备份博客内容到github</li>
</ol>
<p>配置.gitignore文件。进入博客目录文件夹下，找到此文件，用sublime text 打开，在最后增加两行内容/.deploy_git和/public</p>
<ol>
<li>初始化仓库。</li>
</ol>
<p>在博客根目录下，在git bash下依次执行git init和git remote add origin <server> <server>为远程仓库地址。</server></server></p>
<ol>
<li>同步到远程仓库。</li>
</ol>
<p>gitbash下依次执行以下命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">git add . #添加目录下所有文件</div><div class="line"></div><div class="line">git commit -m &quot;更新说明&quot; #提交并添加更新说明</div><div class="line"></div><div class="line">git push -u origin master #推送更新到远程仓库</div></pre></td></tr></table></figure>
<ol>
<li>B电脑拉下远程仓库文件</li>
</ol>
<p>在B电脑上同样先安装好node、git、ssh、hexo，然后建好hexo文件夹，安装好插件，（然后选做：将备份到远程仓库的文件及文件夹删除），然后执行以下命令：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">git init</div><div class="line"></div><div class="line">git remote add origin &lt;server&gt;</div><div class="line"></div><div class="line">git fetch --all</div><div class="line"></div><div class="line">git reset --hard origin/master</div></pre></td></tr></table></figure>
<ol>
<li>发布博客后同步</li>
</ol>
<p>在B电脑发布完博客之后，记得将博客备份同步到远程仓库<br>执行以下命令：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">git add .</div><div class="line"></div><div class="line">#可以用git master 查看更改内容</div><div class="line"></div><div class="line">git commit -m &quot;更新信息&quot;</div><div class="line"></div><div class="line">git push -u origin master  #以后每次提交可以直接git push</div></pre></td></tr></table></figure>
<p>平时同步管理<br>每次想写博客时，先执行：git pull进行同步更新。发布完文章后同样按照上面的 发布博客后同步 同步到远程仓库。</p>
<h3 id="中文乱码"><a href="#中文乱码" class="headerlink" title="中文乱码"></a>中文乱码</h3><p>在 md 文件中写中文内容，发布出来后为乱码，原因是 md 的编码不对，将 md 文件另存为<code>UTF-8</code>编码的文件即可解决问题。</p>
<h2 id="结束语"><a href="#结束语" class="headerlink" title="结束语"></a>结束语</h2><p>建站的系统有很多，如：</p>
<ul>
<li><a href="https://hexo.io/zh-cn/" target="_blank" rel="external">Hexo + GitHub Pages</a></li>
<li><a href="http://jekyll.com.cn/" target="_blank" rel="external">Jekyll + GitHub Pages</a></li>
<li><a href="https://cn.wordpress.org/" target="_blank" rel="external">WordPress + 服务器 + 域名</a></li>
<li><a href="http://www.dedecms.com/" target="_blank" rel="external">DeDeCMS + 服务器 + 域名</a></li>
<li>…</li>
</ul>
<p>使用 Hexo + GitHub Pages 建站，有优点也有缺点：</p>
<ul>
<li>GitHub Pages 不支持数据库管理，所以你只能做静态页面的博客，不能像其他博客（如 WordPress）那样通过数据库管理自己的博客内容。</li>
<li>但是，GitHub Pages 无需购置服务器，免服务器费的同时还能做负载均衡，github pages有300M免费空间。</li>
<li>个人博客真的有必要用数据库吗？答案是否定的。博客静态化，评论记录使用第三方的 <a href="https://gentie.163.com/info.html" target="_blank" rel="external">网易云跟帖</a>就可以了。静态的博客更有利于搜索引擎蜘蛛爬取，轻量化的感觉真的很好。</li>
<li>通过 Hexo 你可以轻松地使用 Markdown 编写文章，非常符合我的口味。Markdown 真的是专门针对程序员开发的语言啊，现在感觉没有 Markdown什么都不想写。什么富文本编辑器，什么word，太麻烦了！而且样式都好丑！效率太低！</li>
</ul>
<p>推荐几个很好用的在线 Markdown 编辑器：</p>
<ul>
<li>作业部落：<a href="https://www.zybuluo.com/mdeditor" target="_blank" rel="external">https://www.zybuluo.com/mdeditor</a></li>
<li>马克飞象：<a href="https://maxiang.io" target="_blank" rel="external">https://maxiang.io</a></li>
</ul>
<p>推荐图床：</p>
<ul>
<li><a href="https://jiantuku.com/#/" target="_blank" rel="external">极简图床 + chrome 插件 + 七牛空间</a>，七牛云储存提供10G的免费空间,以及每月10G的流量，存放个人博客外链图片最好不过了，七牛云储存还有各种图形处理功能、缩略图、视频存放速度也给力。</li>
</ul>

        </div>

        <blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2017-06-01T01:45:48.768Z" itemprop="dateUpdated">2017-06-01 09:45:48</time>
</span><br>


        
        原始文章链接：<a href="/2017/05/30/buildBlog/" target="_blank" rel="external">http://www.lovebxm.com/2017/05/30/buildBlog/</a>
        
    </div>
    <footer>
        <a href="http://www.lovebxm.com">
            <img src="/img/avatar.jpg" alt="白小明">
            白小明
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Git/">Git</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/GitHub-Pages/">GitHub Pages</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Hexo/">Hexo</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Node-js/">Node.js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/博客/">博客</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://www.lovebxm.com/2017/05/30/buildBlog/&title=《可能是最详细的 Hexo + GitHub Pages 搭建博客的教程》 — Xiaoming's Blog&pic=http://www.lovebxm.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://www.lovebxm.com/2017/05/30/buildBlog/&title=《可能是最详细的 Hexo + GitHub Pages 搭建博客的教程》 — Xiaoming's Blog&source=前言：博主目前大三，Web 前端爱好者。写博客的好处，不是为了写而写，而是一个记录思想的过程。不要考虑它能带给你什么，而是你自己从中收获了什么。
最近刚好..." data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://www.lovebxm.com/2017/05/30/buildBlog/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《可能是最详细的 Hexo + GitHub Pages 搭建博客的教程》 — Xiaoming's Blog&url=http://www.lovebxm.com/2017/05/30/buildBlog/&via=http://www.lovebxm.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://www.lovebxm.com/2017/05/30/buildBlog/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2017/05/30/WPO/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">网站性能优化（Yahoo军规）</h4>
      </a>
    </div>
  

  
</nav>



    










    <div id="cloud-tie-wrapper" class="comments cloud-tie-wrapper"></div>
    <script>
    var cloudTieConfig = {
        url: 'http://www.lovebxm.com/2017/05/30/buildBlog/index.html',
        sourceId: 'buildBlog',
        productKey: '294c776acae94037bdd6605780e549e4',
        target: 'cloud-tie-wrapper',
        pcFiles: [
            '//unpkg.com/hexo-theme-material-indigo@latest/css/cloudTie/pc.css',
            '//unpkg.com/hexo-theme-material-indigo@latest/js/cloudTie/pc.min.js',
        ],
        mobileFiles: [
            '//unpkg.com/hexo-theme-material-indigo@latest/css/cloudTie/mobile.css',
            '//unpkg.com/hexo-theme-material-indigo@latest/js/cloudTie/mobile.min.js'
        ]
    };
    </script>
    <script src="//unpkg.com/hexo-theme-material-indigo@latest/js/cloudTie/loader.min.js"></script>







</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        谢谢您~
        <i class="icon icon-quote-right"></i>
    </h3>
    <ul class="reward-items">
        
        <li>
            <img src="/img/wechat.jpg" title="微信打赏二维码" alt="微信打赏二维码">
            <p>微信</p>
        </li>
        

        
        <li>
            <img src="/img/alipay.jpg" title="支付宝打赏二维码" alt="支付宝打赏二维码">
            <p>支付宝</p>
        </li>
        
    </ul>
</div>



</div>

        <!-- <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p>
            <span>Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a></span>
            <span>白小明 &copy; 2017</span>
        </p>
    </div>
</footer> -->

<footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
            <span>白小明 &copy; 2017</span>
        </p>
    </div>
    <div class="bottom">
        <p>
        <span>
        <a target="_blank" href="mailto:80583600@qq.com" style="border-bottom:none">
        <img src="" alt="E-mail 联系" style="width:20px;height:20px;border:none;">
        </a>
        </span>

        <span>
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=80583600&site=qq&menu=yes" style="border-bottom:none">
        <img src="" title="QQ 联系" style="width:22px;height:22px;border:none;"></a>
        </span>

        <span>
        <a target="_blank" href="https://github.com/bxm0927" style="border-bottom:none">
        <img src="" alt="GitHub microzz" title="GitHub 联系" style="width:19px;height:19px;border:none;"></a>
        </span>
        </p>
    </div>
</footer>




    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://www.lovebxm.com/2017/05/30/buildBlog/&title=《可能是最详细的 Hexo + GitHub Pages 搭建博客的教程》 — Xiaoming's Blog&pic=http://www.lovebxm.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://www.lovebxm.com/2017/05/30/buildBlog/&title=《可能是最详细的 Hexo + GitHub Pages 搭建博客的教程》 — Xiaoming's Blog&source=前言：博主目前大三，Web 前端爱好者。写博客的好处，不是为了写而写，而是一个记录思想的过程。不要考虑它能带给你什么，而是你自己从中收获了什么。
最近刚好..." data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://www.lovebxm.com/2017/05/30/buildBlog/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《可能是最详细的 Hexo + GitHub Pages 搭建博客的教程》 — Xiaoming's Blog&url=http://www.lovebxm.com/2017/05/30/buildBlog/&via=http://www.lovebxm.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://www.lovebxm.com/2017/05/30/buildBlog/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };



</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '死鬼去哪里了！';
            clearTimeout(titleTime);
        } else {
            document.title = '(つェ⊂)咦!又好了!';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
